<template>
  <div class="EnclosureTree">
    <template v-for="(item,index) in enclosureData" id="fj">
      <!-- {{item}} -->
      <el-submenu v-if="item.children" :index="item.dirid" :key="index">
        <template slot="title">
          <div class="catalog-cent">
            <i class="iconfont icwenjianjia1"></i>
            <span class="dirname">{{ item.dirname }}</span>
          </div>
        </template>
        <template v-if="item.fjWjccs && item.fjWjccs.length > 0">
          <el-menu-item
            v-for="(items,index) in item.fjWjccs"
            :key="index"
            :index="items.fileid"
          >
            <div class="right-zhankai">
              <i class="iconfont icxiangqing1"></i>
              <el-tooltip
                class="item"
                effect="dark"
                :content="items.filename"
                placement="top"
              >
                <span class="filename">{{ items.filename }}</span>
              </el-tooltip>
            </div>
          </el-menu-item>
        </template>

        <Enclosure-Tree
          :featid="featid"
          :enclosureData="item.children"
        ></Enclosure-Tree>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: "EnclosureTree",
  props: {
    enclosureData: {
      type: Array,
    },
    featid: {
      type: String,
    },
  },
};
</script>

<style lang="scss" scoped>
//删除小箭头
/deep/.el-menu .el-submenu__title {
    border-right:none
}
// .el-submenu__icon-arrow {
//   right: 0px;
// }

.EnclosureTree /deep/.el-menu-item i {
  color: #9da2b5;
}

.EnclosureTree /deep/ .el-submenu__title {
  height: 35px;
  line-height: 35px;
//   border:1px solid red;
//    background: pink !important;
//    border-right:1px solid #ffffff;
}
.EnclosureTree /deep/ #fj{
     background: pink !important;
     border:1px solid red;
}

.EnclosureTree /deep/.el-menu-item,
.el-submenu__title {
  height: 35px;
  line-height: 35px;
  color: #333333;

  span {
    font-size: 14px;
  }
}

.EnclosureTree /deep/.el-menu-item.is-active {
  color: #3385ff !important;

  .right-cent {
    .iconfont {
      color: #3385ff !important;
    }
  }
}

.EnclosureTree /deep/.el-menu-item:hover {
  .right-cent {
    .iconfont {
      color: #3385ff !important;
    }
  }
}

.EnclosureTree .catalog-cent:hover {
  i {
    color: #3385ff !important;
  }
  .dirname {
    color: #3385ff !important;
  }
}
.EnclosureTree /deep/.is-opened {
  //   .el-submenu__title {
  //     color: #3385ff !important;
  //     font-weight: 700;
  //   }
  //   .el-submenu__title i {
  //     color: #3385ff !important;
  //   }
 /deep/ .el-submenu__title {
    .icxiangqing1:before {
      content: "\ea5b";
      font-family: 'iconfont' !important;
    }
  }
}

.EnclosureTree .el-menu {
  border-right: none;
  background-color: #fbfcfc;
  border: 1px solid #ebedf2;
  overflow: scroll;
  height: 100%;
}

.EnclosureTree .el-menu::-webkit-scrollbar {
  display: none;
}

.EnclosureTree {
  .fixpro .el-tabs,
  .el-tabs--top {
    height: 100%;
  }
}

//
.catalog-cent {
  position: relative;
  font-size: 14px;
  span {
    font-size: 14px;
  }
}
.right-zhankai {
  position: relative;
  font-size: 14px;
  span {
    font-size: 14px;
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.right-zhankai:hover {
  i {
    color: #3385ff !important;
  }
  .filename {
    color: #3385ff !important;
  }
}
</style>

<style lang="scss">
.EnclosureTree {
  .el-upload-list {
    display: none !important;
  }

  .el-submenu .el-menu {
    overflow: inherit !important;
    transition: 0s;
  }
}
</style>
<style lang="scss">
.EnclosureTree /deep/ .el-submenu__title {
    background:plum;
}

</style>
